<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog</title>
    <link rel="shortcut icon" type="image/png" href="img/fav.png">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/holder.min.js"></script>

</head>

<body>
    <div class="container-fulid">

        <!-- header -->
        <div class="nav_icon">
            <div class="row">
                <div class="col-md-4 col-md-offset-1">
                    <span class="navicon"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@yourdomain.com</span>
                    <span class="navicon"><i class="fa fa-mobile fa-1x" aria-hidden="true"></i>+15222729355</span>
                </div>
                <div class="col-md-offset-5 col-md-2 visible-lg-block">
                    <a href=""><i class="fa fa-facebook fa_icon" aria-hidden="true"></i> </a>
                    <a href=""><i class="fa fa-twitter fa_icon" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-linkedin fa_icon" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-youtube fa_icon" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>


        <!-- navbar -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target="#mycollapse" data-toggle="collapse">
                        <span class="sr-only">Toggle-navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="" class="navbar-brand">
                        <img src="img/logo.png" alt="logo">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="mycollapse" style="margin-left:570px">
                    <ul class="nav navbar-nav">
                      <li><a href="home.html">Home <span class="sr-only">(current)</span></a></li>
                      <li><a href="class.html">Classess</a></li>
                      <li><a href="gallery.html">Gallery</a></li>
                      <li class="dropdown">
                        <a href="page.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="faq.html">FAQ</a></li>
                            <li><a href="404.html">404</a></li>
                        </ul>
                      </li>
                      <li><a href="blog.html">Blog</a></li>
                      <li><a href="contact.html">Contact</a></li>
                      <li><a href="facility.html">Facilities</a></li>
                    </ul>  
                  </div>
          


            </div>
        </nav>


        <!-- search -->
        <div class="search">
            <h3>Blog</h3>
            <div class="row visible-lg-block">
                <div class="form-inline">
                    <div class="form-group search-gallery">
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-home"></span>
                            </div>
                            <input type="text" class="form-control" placeholder="/ Blog">
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <!-- blog -->
        <div class="container">
            <div class="blog">
                <div class="row">

                    <!-- blog-left-content -->
                    <div class="blog-left-content col-md-8">
                        <div class="blog-bd">
                            <dl>
                                <img src="img/blog1.jpg" alt="">
                                <a href="blog_detail.html" class="btn btn-t">Tips</a>
                                <dt style="color:#86c43c">Ask an Expert:How to find the right school
                                </dt>
                                <dd>If other people poured the same amount of effort into me as I pour into them, things
                                    would probably be different, but things aren’t always equal in friendships and
                                    relationships.Some quick exampple text to build in the card title and make up the
                                    bulk of the
                                    card's content.
                                </dd>
                                <dd class="calendar"><img src="img/blog-calendar.png" alt="">3 Aug 2018</dd>
                            </dl>
                        </div>
                        <div class="blog-bd">
                            <dl>
                                <img src="img/blog2.jpg" alt="">
                                <a href="" class="btn  btn-q">Queries</a>
                                <dt style="color:#fa3664">Ask an Expert:How to find the right school
                                </dt>
                                <dd>If other people poured the same amount of effort into me as I pour into them, things
                                    would probably be different, but things aren’t always equal in friendships and
                                    relationships. Some quick exampple text to build in the card title and make up the
                                    bulk of the
                                    card's content.</dd>
                                <dd class="calendar"><img src="img/blog-calendar.png" alt="">3 Aug 2018</dd>
                            </dl>
                        </div>
                        <div class="blog-bd">
                            <dl>
                                <img src="img/blog3.jpg" alt="">
                                <a href="" class="btn  btn-g">General</a>
                                <dt style="color:#746ecb">Ask an Expert:How to find the right school
                                </dt>
                                <dd>If other people poured the same amount of effort into me as I pour into them, things
                                    would probably be different, but things aren’t always equal in friendships and
                                    relationships. Some quick exampple text to build in the card title and make up the
                                    bulk of the
                                    card's content.</dd>
                                <dd class="calendar"><img src="img/blog-calendar.png" alt="">3 Aug 2018</dd>
                            </dl>
                        </div>
                    </div>

                    <!-- blog-right-content -->
                    <div class="blog-right-content col-md-3 visible-lg-block">
                        <div class="blog-connected">
                            <div class="connected">
                                <h4>Get Connected</h4>
                            </div>
                            <div class="blog-icon">
                                <a href=""><i class="fa fa-facebook fa_icon" aria-hidden="true"></i> </a>
                                <a href=""><i class="fa fa-twitter fa_icon" aria-hidden="true"></i></a>
                                <a href=""><i class="fa fa-linkedin fa_icon" aria-hidden="true"></i></a>
                                <a href=""><i class="fa fa-youtube fa_icon" aria-hidden="true"></i></a>
                            </div>
                        </div>

                        <div class="blog-post">
                            <div class="post">
                                <h4>Recent Posts </h4>
                            </div>
                            <div class="post-t1">
                                <p> It is imperative that laws and regulations should be worked out to reverse this
                                    trend.</p>
                                <p>July 7,2018</p>

                            </div>
                            <div class="divider"></div>
                            <div class="post-t2">
                                <p> It is imperative that laws and regulations should be worked out to reverse this
                                    trend.</p>
                                <p>July 7,2018</p>

                            </div>
                            <div class="divider"></div>
                            <div class="post-t3">
                                <p> It is imperative that laws and regulations should be worked out to reverse this
                                    trend.</p>
                                <p>July 7,2018</p>
                            </div>
                        </div>

                        <div class="blog-treatment">
                            <div class="treatment">
                                <h4 style="color: #333333;">Special title treament</h4>
                                <p>About ten years ago when I was an undergraduate in college, I was working as an
                                    intern at my University's Museum of Natural History. One day while working at the
                                    cash register in the gift shop, I saw an elderly couple come in with a little girl
                                    in a wheelchair.</p>
                                <a href="" class="btn btn-view">View</a>
                            </div>

                        </div>
                        <!-- tasgs -->
                        <div class="blog-tag">
                            <div class="tag">
                                <h4>Tags</h4>
                            </div>
                            <div class="tag-content">
                                <div class="tag-btn">
                                    <a href="" class="btn">Childhood</a>
                                    <a href="" class="btn">Kids</a>
                                    <a href="" class="btn">School</a>
                                </div>
                                <div class="tag-btn">
                                    <a href="" class="btn">Play School</a>
                                    <a href="" class="btn">Facilities</a>
                                    <a href="" class="btn">Uniform</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <!-- 分页 -->
                <nav>
                    <ul class="pagination">
                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
                        </li>
                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                    </ul>
                </nav>
            </div>
        </div>







        <!-- footer -->
        <div class="footer">
            <div class="footer-top"></div>
            <div class="footer-content">
                <div class="footer-info">
                    <div class="row col-md-7 col-md-offset-5 col-xs-10 col-xs-offset-2">
                        <p class="footer-logo"> </p>
                    </div>
                    <div class="row  col-md-12 col-xs-11col-xs-offset-1">
                        <p class="footer-text">Copyright &copy; 2018 Company name All rights reserved.网页模板 </p>
                    </div>
                    <div class="row">
                        <div class="footer-icon col-xs-12">
                            <a href=""><i class="fa fa-facebook fa_icon" aria-hidden="true"></i> </a>
                            <a href=""><i class="fa fa-twitter fa_icon" aria-hidden="true"></i></a>
                            <a href=""><i class="fa fa-linkedin fa_icon" aria-hidden="true"></i></a>
                            <a href=""><i class="fa fa-youtube fa_icon" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>